<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总发放积分" :total="dataInfo.provide > 0 ? dataInfo.provide : 0">
          <a-tooltip title="平台发放以及用户获得的积分" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="已使用积分" :total="dataInfo.use > 0 ? dataInfo.use : 0">
          <a-tooltip title="用户商品抵扣的积分" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="未使用积分" :total="dataInfo.notUsed > 0 ? dataInfo.notUsed : 0">
          <a-tooltip title="用户积分余额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changeDate(dateType.today, null, null)">今日实时</a>
              <a @click="changeDate(dateType.week, null, null)">近7天</a>
              <a @click="changeDate(dateType.month, null, null)">近30天</a>
              <a @click="changeDate(dateType.total, null, null)">总计</a>
            </div>
            <a-range-picker :style="{width: '256px'}" @change="customDateChoice"/>
          </div>
          <a-tab-pane loading="true" tab="积分统计" key="1">
            <a-row>
              <a-col >
                <line-chart-multid-date :fields="statisticsFields" :dataSource="statistics"></line-chart-multid-date>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import Bar from '@/components/chart/Bar'
  import LineChartMultidDate from '@/components/chart/LineChartMultidDate'
  import HeadInfo from '@/components/tools/HeadInfo.vue'

  import Trend from '@/components/Trend'
  import { getAction, httpAction } from '@/api/manage'

  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      Bar,
      Trend,
      LineChartMultidDate,
      HeadInfo
    },
    data() {
      return {
        loading: true,
        center: null,
        statistics: [],
        dataInfo: {provide:0, use:0, notUsed:0},
        dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
        statisticsFields: ['发放积分','使用积分'],
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
    },
    methods: {
      initLogInfo () {
        this.requestStatistics(this.dateType.week, null, null);
        this.requestInfo();
      },
      customDateChoice (range) {
        this.changeDate(this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
      },
      changeDate(type, start, end){
        this.requestStatistics(type, start, end)
      },
      requestStatistics (type, start, end) {
        getAction("/statistics/integralStatistics", { type: type, dayStart: start, dayEnd: end }).then(res => {
          if (res.success) {
            this.statistics = res.result.lineData
          }
        })
      },
      requestInfo () {
        getAction("/statistics/integralInfo", null).then(res => {
          if (res.success) {
            this.dataInfo = res.result
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

</style>